<template>
  <div class="common-index">
    <!-- nav (一开始想单独在一个组件的，但是后面不好弄，所以结构有点不同)-->
    <div class="nav">
      <div class="container-nav">
        <!-- logo -->
        <div class="logo">
          <span class="iconfont icon-gouwu"></span>        
        </div>
        <!-- 分类 -->
        <div class="category">
          <em @click="toCategory('水果')">水果</em>
          <em @click="toCategory('蔬菜')">蔬菜</em>
          <em @click="toCategory('禽畜肉蛋')">禽畜肉蛋</em>
          <em @click="toCategory('苗木花草')">苗木花草</em>
          <em @click="toCategory('农副加工')">农副加工</em>
          <em @click="toCategory('粮油米面')">粮油米面</em>
        </div>
        <!-- 搜索 -->
        <div class="search">
          <el-select placeholder="请选择" v-model="searchOption" style="width:90px;">
            <el-option label="名称" value="1"></el-option>
            <el-option label="地区" value="2"></el-option>
          </el-select>
          <input v-model.trim="searchValue" placeholder="请输入搜索内容"/>
          <span class="el-icon-search" @click="toCategory_search()"></span>
        </div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="slide cf">
      <el-carousel :interval="3000" arrow="hover">
        <el-carousel-item v-for="item in slideImg" @click="clickSlideImg(item.slideImgUrl)" :key="item._id">
          <div class="slide-img">
            <img :src="item.slideImg" alt="">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 楼层分类 -->
    <div class="container">
      <!-- 分类楼层 -->
      <div class="category cf">
        <!-- 水果 -->
        <div class="category-shuiguo category-item">
          <!-- 左边 -->
          <div class="category-left">
            <p>水果</p>
            <p class="category-info">产地货源 一手价格</p>
            <p class="category-gengduo" @click="toCategory('水果')">
              <i>查看更多</i>
              <i class="el-icon-arrow-right"></i>
            </p>
          </div>
          <!-- 右边 -->
          <div class="category-right">
            <div class="category-goods" @click="toDetail(item)" v-for="(item,index) in shuiguo" :key="index" :class="{'active':index == hoverIndex1}" @mouseover="hoverIndex1 = index" @mouseout="hoverIndex1 = -1">
              <img :src="item.goodsImg" alt="">
              <span class="name">{{item.goodsname}}</span>
              <span class="describe" :title="item.describe">{{item.describe}}</span>
              <span class="price">{{item.price}}元</span>
              <span class="address">{{item.goodsAddress}}</span>
            </div>
          </div>
        </div>
        <!-- 蔬菜 -->
        <div class="category-shucai category-item">
          <!-- 左边 -->
          <div class="category-left">
            <p>蔬菜</p>
            <p class="category-info">品种丰富 以质论价</p>
            <p class="category-gengduo" @click="toCategory('蔬菜')">
              <i>查看更多</i>
              <i class="el-icon-arrow-right"></i>
            </p>
          </div>
          <!-- 右边 -->
          <div class="category-right">
            <div class="category-goods" @click="toDetail(item)" v-for="(item,index) in shucai" :key="index" :class="{'active':index == hoverIndex2}" @mouseover="hoverIndex2 = index" @mouseout="hoverIndex2 = -1">
              <img :src="item.goodsImg" alt="">
              <span class="name">{{item.goodsname}}</span>
              <span class="describe" :title="item.describe">{{item.describe}}</span>
              <span class="price">{{item.price}}元</span>
              <span class="address">{{item.goodsAddress}}</span>
            </div>
          </div>
        </div>
        <!-- 禽畜肉蛋 -->
        <div class="category-qinchuroudan category-item">
          <!-- 左边 -->
          <div class="category-left">
            <p>禽畜肉蛋</p>
            <p class="category-info">基地直供 运输包活</p>
            <p class="category-gengduo" @click="toCategory('禽畜肉蛋')">
              <i>查看更多</i>
              <i class="el-icon-arrow-right"></i>
            </p>
          </div>
          <!-- 右边 -->
          <div class="category-right">
            <div class="category-goods" @click="toDetail(item)" v-for="(item,index) in qinchuroudan" :key="index" :class="{'active':index == hoverIndex3}" @mouseover="hoverIndex3 = index" @mouseout="hoverIndex3 = -1">
              <img :src="item.goodsImg" alt="">
              <span class="name">{{item.goodsname}}</span>
              <span class="describe" :title="item.describe">{{item.describe}}</span>
              <span class="price">{{item.price}}元</span>
              <span class="address">{{item.goodsAddress}}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 消除重叠 -->
      <div style="height:1px"></div>
    </div>
  </div>
</template>
<script>
// 发请求全部导入
import api from '@/api/commonIndex/index'
export default {
  data() {
    return {
      // 图片数组
      slideImg:[],

      // 水果
      shuiguo:[],
      // 蔬菜
      shucai:[],
      // 禽畜肉蛋
      qinchuroudan:[],

      // hover设置样式使用
      hoverIndex1:-1,
      hoverIndex2:-1,
      hoverIndex3:-1,

      searchValue:'',
      searchOption:'1',
    }
  },
  methods: {
    // 得到轮播图数据
    getSlideImgList(){
      api.getSlideImgList().then(res=>{
        // console.log(res)
        if(res.code !== 200)return
        // if(!res.data || res.data.length<1) return
        this.slideImg = res.data
      })
    },
    // 根据分类得到数据
    getCategoryBy1(val){
      api.getCategoryByValue({_id:val}).then(res=>{
        // console.log(res)
        if(res.code !== 200)return
        this.shuiguo = res.data
      })
    },
    getCategoryBy2(val){
      api.getCategoryByValue({_id:val}).then(res=>{
        // console.log(res)
        if(res.code !== 200)return
        this.shucai = res.data
      })
    },
    getCategoryBy3(val){
      api.getCategoryByValue({_id:val}).then(res=>{
        // console.log(res)
        if(res.code !== 200)return
        this.qinchuroudan = res.data
      })
    },
    // 去分类页
    toCategory(val){
      // 这种方式页面刷新会丢失数据
      // this.$router.push({name:'commonCategory',params:{value:val}})
      // 这样不会丢失数据，但是得在路由配置后面加/:value
      // this.$router.push({path:`/common/category/${val}`})
      // 这个最好
      this.$router.push({path:'/common/category',query:{value:val}})
      // 上面都不行，由于Nav是公共组件的原因，所以如果用户在分类页点击的时候就没有效果(解决办法，将nav放到index)
    },
    // 去分类页（搜索）
    toCategory_search(){
      if(!this.searchValue) return
      this.$router.push({path:'/common/category',query:{searchValue:this.searchValue,searchOption:this.searchOption}})
    },
    // 去详情页
    toDetail(item){
      // console.log(item._id)
      this.$router.push({path:'/common/detail',query:{id:item._id}})
    },
  },
  created() {
    // 得到轮播图数据
    this.getSlideImgList()
    // 根据分类得到数据
    this.getCategoryBy1('水果')
    this.getCategoryBy2('蔬菜')
    this.getCategoryBy3('禽畜肉蛋')
  },
  mounted() {
    
  },
}
</script>
<style lang="less" scoped>
.common-index{
  width: 100%;
  
  .container{
    margin-top: 20px;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    // 分类
    .category{
      .category-item{
        width: 1200px;
        height: 600px;
        margin-bottom: 20px;
        .category-left{
          float: left;
          height: 600px;
          width: 200px;
          background: url('../../assets/img/floor-6.png') no-repeat center center;
          p{
            font-size: 24px;
            font-weight: 900;
            margin-top: 80px;
            text-align: center;
            color: #fff;
          }
          .category-info{
            margin-top: 10px;
            font-size: 16px;
            color: #fff;
            font-weight: 400;
          }
          .category-gengduo{
            width: 90px;
            height: 30px;
            line-height: 30px;
            background-color: #fff;
            margin-top: 230px;
            font-size: 16px;
            color: rgb(70, 68, 68);
            font-weight: 400;
            margin-left: 55px;
            border-radius: 5px;
            &:hover{
              color: #00e28b;
            }
          }
        }
        .category-right{
          float: right;
          margin-left: 10px;
          width: 990px;
          height: 600px;
          transition: all ease .2s;
          .category-goods{
            position: relative;
            float: left;
            width: 240px;
            height: 295px;
            margin-right: 10px;
            margin-bottom: 10px;
            background-color: #fff;
            // 第四个和第八个不需要
            &:nth-child(4n){
              margin-right: 0px;
            }
            img{
              display: block;
              margin-left: 50%;
              transform: translateX(-50%);
              margin-top: 20px;
              width: 200px;
              height: 150px;
            }
            span{
              display: block;
              margin-top: 10px;
              text-align: center;
              color: #918f8f;
            }
            .price{
              color: #ff442f;
            }
            .describe{
              padding: 0 10px;
              overflow: hidden;
              white-space:nowrap;
              text-overflow: ellipsis;
            }
          }
        }
        .active{
          transform: translate3d(0,-2px,0);
          box-shadow: 0 15px 30px rgba(0,0,0,.1);
        }
      }
      // 水果
      .category-shuiguo{
      }
      // 蔬菜
      .category-shucai{
        .category-left{
          background: url('../../assets/img/floor-4.png') no-repeat center center;
        }
      }
      // 禽畜肉蛋
      .category-qinchuroudan{
        .category-left{
          background: url('../../assets/img/floor-3.png') no-repeat center center;
        }
      }
    }
  }
  // nav
  .nav{
    height: 100px;
    width: 100%;
    line-height: 100px;
    background-color: #fff;
    .container-nav{
      display: flex;
      width: 1200px;
      margin-left: auto;
      margin-right: auto;
      .logo{
        margin-right: 100px;
        span{
          font-size: 50px;
          color: #00e28b;
        }
      }
      .category{
        margin-right: 80px;
        em{
          font-size: 16px;
          margin-right: 30px;
          cursor: pointer;
          &:hover{
            color: #00e28b;
          }
        }
      }
      .search{
        // 选择
        /deep/ .el-select{

        }
        /deep/ .el-input__inner{
          border-radius: 0px !important;
        }
        // 输入框
        input{
          height: 40px;
          width: 342px;
          box-sizing: border-box;
          border: 1px solid #ddd;      
          margin-left: -1px;
          text-indent: 10px;
          // placeholder字体颜色
          &::-webkit-input-placeholder {
            color: #C0C4CC;
          }
          &::-moz-placeholder {
            color: #C0C4CC;
          }
          &:hover{
            border: 1px solid #C0C4CC;
          }
          &:hover+span{
            border: 1px solid #C0C4CC;
          }
          &:focus{
            outline: 0px;
            border: 1px solid #00e28b;
          }
          // 加号表示后面出现的第一个
          &:focus+span{
            border: 1px solid #00e28b;
          }
          // 所以这里这样写不行（现在效果也可以用，到时候可以用js写）
          // &:hover+.el-select{
          //   .el-input__inner{
          //     border-color: #C0C4CC;
          //   }
          // }
        }
        // 按钮
        >span{
          display: inline-block;
          width: 40px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background-color: #fff;
          box-sizing: border-box;
          border: 1px solid #ddd;
          margin-left: -1px;
          color: #C0C4CC;
          &:hover{
            border: 1px solid #00e28b;
            background-color: #00e28b;
            color: #fff;
          }
        }
      }
    }
  }
  // 轮播图
  .slide{
    height: 500px;
    width: 100%;
    /deep/ .el-carousel{
      .el-carousel__container{
        height: 500px;
        .el-carousel__arrow--left {
          left: 100px;
        }
        .el-carousel__arrow--right {
          right: 100px;
        }
        .slide-img{
          height: 500px;
          img{
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>